<div class="layui-card">

	<div class="layui-card-header">
		<h2 class="header-title"><i class="layui-icon layui-icon-user"></i> 用户管理</h2>
		<span class="layui-breadcrumb pull-right"> <a href="#!console">首页</a>
			<a><cite>用户管理</cite></a>
		</span>
	</div>
	
	<div class="layui-card-body">

		<div class="layui-card">
		
			<div class="layui-form layui-card-header layuiadmin-card-header-auto" lay-filter="app-content-list">
				<div class="layui-form-item">
					<div class="layui-inline">
						<div class="layui-input-inline">
							<input type="text" id="loginName" placeholder="请输入账号" autocomplete="off" class="layui-input">
						</div>
					</div>
					<div class="layui-inline">
						<button id="user-btn-search" class="layui-btn icon-btn">
							<i class="layui-icon">&#xe615;</i>搜索
						</button>
					</div>
				</div>
			</div>

			<div class="layui-card-body">
				<input type="hidden" id="csrftoken" value="${csrftoken!}"/>
				<table class="layui-table" id="user-table" lay-filter="user-table"></table>
			</div>
		</div>
	</div>


	<!-- 表格工具栏 -->
	<script type="text/html" id="user-table-toolbar">
    	<a class="layui-btn layui-btn-xs" lay-event="add"><i class="layui-icon layui-icon-add-1"></i>新增</a>
    	<a　id="user-table-toolbar-del" style="display:none" class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="layui-icon layui-icon-delete"></i>删除</a>
	</script>
	<!-- 表格操作列 -->
	<script type="text/html" id="user-table-bar">
    	<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit"><i class="layui-icon layui-icon-edit"></i>修改</a>
    	<a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="auz"><i class="layui-icon layui-icon-auz"></i>授权</a>
    	<a class="layui-btn layui-btn-xs" lay-event="resetpsw"><i class="layui-icon layui-icon-password"></i>重置密码</a>
	</script>

	<!-- 表格状态列 -->
	<script type="text/html" id="user-tpl-enabled">
    	<input type="checkbox" lay-filter="user-tpl-enabled" value="{{d.userId}}" lay-skin="switch" lay-text="正常|禁用" {{d.enabled==1?'checked':''}}/>
	</script>
	<script type="text/html" id="user-tpl-locked">
    	<input type="checkbox" lay-filter="user-tpl-locked" value="{{d.userId}}" lay-skin="switch" lay-text="正常|锁定" {{d.locked==0?'checked':''}}/>
	</script>

	<script>
		layui.use([ 'form', 'table', 'util', 'config', 'admin' ], function() {
			var form = layui.form;
			var table = layui.table;
			var config = layui.config;
			var layer = layui.layer;
			var util = layui.util;
			var admin = layui.admin;

			// 渲染表格
			table.render({
				elem : '#user-table',
				url : '${rc.contextPath}/user/data',
				method : 'POST',
				loading : true,
				page : {
					limits: [10, 20, 50, 100]
				},
				toolbar : '#user-table-toolbar',
				defaultToolbar: ['filter'],
				cols : [ [ 
		           	{ type : 'numbers', fixed: 'left' },
		           	{ type : 'checkbox', fixed: 'left' },
		           	{ title : '账号', field : 'userName', width: 180, sort : true, fixed: 'left' },
		           	{ title : '手机号', field : 'phoneNo', width: 140 },
		           	{ title : '邮箱', field : 'email', width: 220},
		          	{ title : '创建时间', templet : function(d) {return util.toDateString(d.createTime);}, width: 200 },
		           	{ title : '最后登录时间', templet : function(d) { return util.toDateString(d.lastLoginTime); }, width: 200 },
			       	{ title : '密码修改时间', templet : function(d) { return util.toDateString(d.updatePwTime); }, width: 200 },
					{ title : '锁定状态', field : 'locked', templet : '#user-tpl-locked', width: 100, sort : true },
					{ title : '启用状态', field : 'enabled', templet : '#user-tpl-enabled', width: 100, sort : true },
					{ title : '操作', toolbar : '#user-table-bar', width: 275, fixed: 'right' }
				] ]
			});

			//监听头工具栏事件
			table.on('toolbar(user-table)', function(obj){
			    if('add' == obj.event) {
			    	showAddModel();
			    	return;
			    } else if ('del' == obj.event) {
				    var checkStatus = table.checkStatus(obj.config.id), data = checkStatus.data;
					if(data.length > 0) {
						var userIds = [];
						data.forEach(function(d) {
							userIds.push(d.userId);
						})
						layer.confirm('确定要删除选择的用户记录吗？', function(i) {
							layer.close(i);
							layer.load(2);
							admin.req('${rc.contextPath}/user/delete', {
								userIds: userIds,
								csrftoken: $("#csrftoken").val()
							}, function(data) {
								layer.closeAll('loading');
								if (data.code == 200) {
									layer.msg(data.message, {
										icon : 1
									});
									table.reload('user-table', {});
								} else {
									layer.msg(data.message, {
										icon : 2
									});
								}
							}, 'POST');
						});
					} else {
						layer.msg('请至少选择一条记录', {
							icon : 2
						});
					}
			    	return;
			    }
			    
			});

			// 工具条点击事件
			table.on('tool(user-table)', function(obj) {
				var data = obj.data;
				var layEvent = obj.event;
				if (layEvent === 'edit') {
					// 修改
					showEditModel(data);
				} else if (layEvent === 'resetpsw') {
					// 重置密码
					layer.confirm('确定重置此用户的密码吗？', function(i) {
						layer.close(i);
						layer.load(2);
						admin.req('${rc.contextPath}/user/resetpublicpsw', {
							userId: obj.data.userId
						}, function(data) {
							layer.closeAll('loading');
							if (data.code == 200) {
								layer.alert("密码重置成功，新密码为：" + data.message);
							} else {
								layer.msg(data.message, {
									icon : 2
								});
							}
						}, 'POST');
					});
				}
			});

			//显示表单弹窗
			var showEditModel = function(data) {
				admin.popupCenter({
					title : '修改用户',
					path : '${rc.contextPath}/user/edit?userId=' + data.userId,
					finish : function() {
						table.reload('user-table', {});
					}
				});
			};

			//显示表单弹窗
			var showAddModel = function() {
				admin.popupCenter({
					title : '新增用户',
					path : '${rc.contextPath}/user/add',
					finish : function() {
						table.reload('user-table', {});
					}
				});
			};

			// 搜索按钮点击事件
			$('#user-btn-search').click(function() {
				var loginName = $('#loginName').val();
				table.reload('user-table', {
					where : {
						loginName : loginName
					}
				});
			});

			table.on('sort(user-table)', function(obj) {
				table.reload('user-table', {
					initSort : obj,
					where : {
						orderField : obj.field, //排序字段
						orderType : obj.type
					//排序方式
					}
				});
			});

			// 复选框选择监听
			table.on('checkbox(user-table)', function(obj) {
			    var checkStatus = table.checkStatus('user-table'),
		    	data = checkStatus.data;
				if(data.length > 0) {
					$("#user-table-toolbar-del").show();
				} else {
					$("#user-table-toolbar-del").hide();
				}
			});
			
			//监听行单击事件
		  	table.on('row(user-table)', function(obj){
		    	//标注选中样式
		    	obj.tr.addClass('layui-table-click').siblings().removeClass('layui-table-click');
		  	});

			// 修改user状态
			form.on('switch(user-tpl-locked)', function(obj) {
				layer.load(2);
				admin.req('${rc.contextPath}/user/changelockedstatus', {
					userId : obj.elem.value,
					locked : obj.elem.checked ? 0 : 1
				}, function(data) {
					layer.closeAll('loading');
					if (data.code == 200) {
						layer.msg(data.message, {
							icon : 1
						});
						table.reload('user-table', {});
					} else {
						layer.msg(data.message, {
							icon : 2
						});
						$(obj.elem).prop('checked', !obj.elem.checked);
						form.render('checkbox');
					}
				}, 'POST');
			});

			form.on('switch(user-tpl-enabled)', function(obj) {
				layer.load(2);
				admin.req('${rc.contextPath}/user/changeenabledstatus', {
					userId : obj.elem.value,
					enabled : obj.elem.checked ? 1 : 0
				}, function(data) {
					layer.closeAll('loading');
					if (data.code == 200) {
						layer.msg(data.message, {
							icon : 1
						});
						table.reload('user-table', {});
					} else {
						layer.msg(data.message, {
							icon : 2
						});
						$(obj.elem).prop('checked', !obj.elem.checked);
						form.render('checkbox');
					}
				}, 'POST');
			});
		});
	</script>